<template>
  <!--- <div class="app-container">
      <el-form
         ref="form"
         :model="form"
         label-width="108px"
         class="bg-white pt20"
      >
         <el-form-item label="申请账号">
            <el-select placeholder="请选择账号" v-model="form.groupId"  @change="handleSelect" >
               <el-option v-for="item in userList"   
               :key="item.groupId"
               :label="item.groupName"
               :value="item.groupId">
               </el-option>
            </el-select>
          
            <div class="show-list-name" v-text="GroupMemberStr"></div>
         </el-form-item>
         <el-form-item label="申请原因：">
            <el-input
               type="textarea"
               v-model="form.applyReason"
               placeholder="请输入申请原因"
            ></el-input>
         </el-form-item>
         <!---收藏数量
         <el-form-item label="申请详情">
            <el-table v-loading="loading" :data="selectList" border>
               <el-table-column
                  label="表单名称"
                  align="center"
                  key="tableAlias"
                  prop="tableAlias"
                  :show-overflow-tooltip="true"
               ></el-table-column>
               <el-table-column
                  label="表单名称（数据库）"
                  align="center"
                  key="tableName"
                  prop="tableName"
                  :show-overflow-tooltip="true"
               ></el-table-column>
               <el-table-column
                  label="所属部门"
                  key="deptName"
                  prop="deptName"
                  width="199"
               >
                  <template slot-scope="scope">
                     <div>
                        <span>{{ scope.row.idKey }}</span>
                     </div>
                  </template>
               </el-table-column>
               <el-table-column
                  label="安全等级"
                  key="safeLevel"
                   align="center"
                  prop="safeLevel"
                  width="199"
               >
               </el-table-column>
               <el-table-column
                  label="申请权限类型"
                  key="accessType"
                  align="center"
                  prop="accessType"
                  width="199"
               >
                  <template slot-scope="scope">
                     <div>
                        <el-select v-model="scope.row.accessType" placeholder="请选择权限">
                           <el-option  v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                     </div>
                  </template>
               </el-table-column>
            </el-table>
         </el-form-item>
         <el-form-item  class="search-btn btn-item">
            <el-button type="primary" size="mini" @click="onSubmit" class="search-btn-item">提交</el-button>
            <el-button class="search-btn-item" size="mini"  @click="handleExit">取消</el-button>
         </el-form-item>
      </el-form>
   </div>-->
   <div>
      <el-form
         ref="form"
         :model="form"
         label-width="85px"
         class="bg-white pt20"
      >
         <el-form-item label="申请账号">
            <el-select placeholder="请选择账号" v-model="form.groupId"  @change="handleSelect" >
               <el-option v-for="item in userList"   
               :key="item.groupId"
               :label="item.groupName"
               :value="item.groupId">
               </el-option>
            </el-select>
            <div class="show-list-name" v-text="GroupMemberStr"></div>
         </el-form-item>
         <el-form-item label="申请原因：">
            <el-input
               type="textarea"
               v-model="form.applyReason"
               placeholder="请输入申请原因"
            ></el-input>
         </el-form-item>
         <!---收藏数量--->
         <el-form-item label="申请详情">
            <el-table v-loading="loading" :data="selectList" border>
               <el-table-column
                  label="表单名称"
                  align="center"
                  key="tableAlias"
                  prop="tableAlias"
                  min-width="199"
                  :show-overflow-tooltip="true"
               ></el-table-column>
               <el-table-column
                  label="表单名称（数据库）"
                  align="center"
                  key="tableName"
                  prop="tableName"
                  min-width="199"
                  :show-overflow-tooltip="true"
               ></el-table-column>
               <el-table-column
                  label="所属部门"
                  key="deptName"
                  prop="deptName"
                  min-width="199"
               >
                  <template slot-scope="scope">
                     <div>
                        <span>{{ scope.row.idKey }}</span>
                     </div>
                  </template>
               </el-table-column>
               <el-table-column
                  label="安全等级"
                  key="safeLevel"
                   align="center"
                  prop="safeLevel"
                  width="80"
               >
               </el-table-column>
               <el-table-column
                  label="申请权限类型"
                  key="accessType"
                  align="center"
                  prop="accessType"
                  width="199"
               >
                  <template slot-scope="scope">
                     <div>
                        <el-select v-model="scope.row.accessType" placeholder="请选择权限">
                           <el-option  v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                     </div>
                  </template>
               </el-table-column>
            </el-table>
         </el-form-item>
         <el-form-item  class="search-btn btn-item">
            <el-button type="primary" size="mini" @click="onSubmit" class="search-btn-item">提交</el-button>
            <el-button class="search-btn-item" size="mini"  @click="handleExit">取消</el-button>
         </el-form-item>
      </el-form>
   </div>
</template>
<style lang="scss" scoped>
/**
    Element class start
  **/
.el-form-item__label {
   width: 200px !important;
   text-align: left;
}
/**
    Element class end
  **/
  .show-list-name{
      width:100%;
      border:1px solid #DCDFE6;
      min-height:54px;
      padding:0 10px;
  }
</style>
<script>
import {groupUserList,getGroupMemberList} from "@/api/dataManagement/system/group";
import {postApply} from "@/api/dataManagement/system/info";
import {typeList} from "@/assets/js/fieldTypeList";
import {setTypeListSelect} from "@/utils/zkComm";

export default {
   name: "mapPermis",
   data() {
      return {
         form: {
            applyReason: "",
            dirId:0,
            groupId:'本人'
         },
         loading:false,
         // 权限类型
         typeList,
         selectList:[],
         userList:[],
         GroupMemberStr:'本人',
      };
   },
   created(){
      this.getUserList()
   },
   mounted() {
      //  var nav =document.getElementsByClassName("el-form")[0].clientHeight
      // var mb8 =document.getElementsByClassName("mb8")[0].clientHeight
      // this.mapHeight = window.window.innerHeight-nav-mb8-160
      // console.log(this.mapHeight)
         // console.log(setTypeListSelect(1))
         this.getSesstion();
   },
   methods: {
      getSesstion(){
         // this.selectList = JSON.parse(sessionStorage.getItem("selectList"));
         var selectList = JSON.parse(sessionStorage.getItem("selectList"))
         for(var i=0;i<selectList.length;i++){
            selectList[i].accessType = setTypeListSelect(selectList[i].accessType,'')
         }
         this.selectList =selectList
         console.log(this.selectList)
      },
      getUserList(){
            groupUserList().then(res=>{
               var data = {
                  groupName:"本人",
                  groupId:''
               }
               this.userList = res.data;
               this.userList.unshift(data);
            })
      },
      onSubmit() {
         // dirId  id(tableid) accessType applyReason userId
         let tables = [];
         let postData = Object.assign({}, {}, this.form);
         postData.dirId = this.selectList[0].dirId;
         console.log(this.selectList,this.$route.params.tableId,'112121')
         for (let i = 0; i < this.selectList.length; i++) {
            const item = this.selectList[i]
            let obj = {};
            obj.accessType = (isNaN(Number(item.accessType))) ? (setTypeListSelect(item.accessType, 'number')) : item.accessType;;
            // obj.applyId = 0;
            // obj.deptName = "";
            obj.dirId = item.dirId;
            obj.id = item.id;
            obj.safeLevel = item.safeLevel;
            obj.tableAlias = item.tableAlias;
            obj.tableId =this.$route.params.tableId ?this.$route.params.tableId:item.id;
            obj.tableName = item.tableName;
            tables.push(obj);
         }
         postData.applyTableList = tables;
         if (postData.groupId == '本人') {
            delete postData.groupId;
         }
         postApply({ ...postData }).then(res => {
            if (res.code == 200) {
               this.$message({
                  message: '申请成功',
                  type: 'success'
               });
               // this.$router.push("/DMS/dataMap/mapDirectory?dirId=" + postData.dirId);
               this.handleExit()
            }
         })
      },
      handleSelect(val){
         var GroupMemberStr = '';
         if(!val){
            this.GroupMemberStr = '本人'
            return false
         }
         getGroupMemberList({id:val}).then(res=>{
            var data = res.data;
            for(var i=0;i<data.length;i++){
               (i==data.length-1)? GroupMemberStr+=data[i].userName: GroupMemberStr+=data[i].userName+','
            }
             this.GroupMemberStr = GroupMemberStr
         })
      },
      handleExit(){
         // this.$router.push("/DMS/dataMap/mapDirectory?dirId="+this.selectList[0].dirId);
         this.$emit("clonePermis",'')
      }
   }
};
</script>
